import defaultSettings from '~/assets/config/settings';
// import variables from '~/assets/styles/global.module.scss'
const variables = {}
const storageSetting = JSON.parse(localCache.getItem('layout-setting')) || '';

export const useSettingsStore = defineStore(
  'settings',
  () => {
    const title = ref("");

    const theme = ref(storageSetting.theme || variables.primaryColor || variables.primaryColor);

    const sideTheme = ref(storageSetting.sideTheme || defaultSettings.sideTheme);

    const showSettings = ref(true);

    const topNav = ref(storageSetting.topNav === undefined ? defaultSettings.topNav : storageSetting.topNav);

    const tagsView = ref(storageSetting.tagsView === undefined ? defaultSettings.tagsView : storageSetting.tagsView);

    const dynamicTitle = ref(storageSetting.dynamicTitle === undefined ? defaultSettings.dynamicTitle : storageSetting.dynamicTitle);

    /**
     * 主题色变更
     * @param sideThemeStr
     */
    const changeSideTheme = (sideThemeStr: string) => {
      sideTheme.value = sideThemeStr;
    }

    /**
     *  TopNav展示变更
     * @param topNavStr
     */
    const changeTopNav = (topNavStr: string) => {
      topNav.value = topNavStr;
    }

    /**
     * TagsView展示变更
     * @param tagsViewStr
     */
    const changeTagsView = (tagsViewStr: string) => {
      tagsView.value = tagsViewStr;
    }

    /**
     * 动态标题 变更
     * @param dynamicTitleStr
     */
    const changeDynamicTitle = (dynamicTitleStr: string) => {
      dynamicTitle.value = dynamicTitleStr;
    }

    /**
     * 主题颜色 变更
     * @param themeVal
     */
    const changeTheme = (themeVal: string) => {
      theme.value = themeVal;
    }

    /**
     * 动态修改标题
     */
    const setTitle = (titleVal: string) => {
      title.value = titleVal || ""
      useDynamicTitle();
    }

    const saveSetting = () => {
      let layoutSetting = {
        theme: theme.value,
        sideTheme: sideTheme.value,
        topNav: topNav.value,
        tagsView: tagsView.value,
        dynamicTitle: dynamicTitle.value
      }
      let layoutSettingJson = JSON.stringify(layoutSetting);
      localCache.setItem('layout-setting', layoutSettingJson);
    }

    const resetSetting = () => {
      localCache.removeItem("layout-setting");
    }

    return {
      title,
      theme,
      changeTheme,
      sideTheme,
      changeSideTheme,
      showSettings,
      changeDynamicTitle,
      topNav,
      changeTopNav,
      tagsView,
      changeTagsView,
      dynamicTitle,
      setTitle,
      saveSetting,
      resetSetting
    }
  }


)

